<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="access-control-allow-origin" content="*">
	<link href="/static/css/phone/mui.min.css" rel="stylesheet" />
	<link href="/static/css/phone/bootstrap.min.css" rel="stylesheet"/>

	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/phone/bootstrap.min.js"></script>

	<style>
			.chart {
				height: 350px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
</head>

<body>


<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title" style="text-align: center;">出租房统计</h1>
</header>
<div class="mui-content">
	<div class="mui-content-padded">
		<h5>已租房与未出租占比</h5>
		<div id="rent" class="chart"></div>
		<h5>各乡镇租房统计</h5>
		<div id="rentpie" class="chart"></div>
	</div>
</div>

<script src="/static/webjars/echarts/echarts.js"></script>

<script>
			var charts = echarts.init(document.getElementById("rent"));
			var xdate=new Array();
			var isrent=new Array();
			var norent=new Array();
			var countryid=new Array();
			var avg=new Array();

			var sumis = 0;
			var sumno = 0;

			$.ajax('/getRentHouse/town',{
				data:{
				},
				dataType:'json',//服务器返回json格式数据
				type:'GET',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Content-Type':'application/json'},
				success:function(data){
					for(var i = 0;i < data.length;i++){
						xdate.push(data[i].townName);
						isrent.push(data[i].isrent);
						norent.push(data[i].norent);
						countryid.push(data[i].townId);
						avg.push(data[i].avg);
					}

					//饼图总和计算
					for(var i = 0;i < isrent.length;i++){
						sumis = sumis + isrent[i];
					}
					for(var i = 0;i < norent.length;i++){
						sumno = sumno + norent[i];
					}


					/////饼图部分
					var piecharts = echarts.init(document.getElementById("rentpie"));
					var option2 = {
						title:{
						},
						tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							top:'',
							data: ['已出租','未出租']
						},
						series : [
							{
								name: '出租情况',
								type: 'pie',
								radius : '55%',
								center: ['50%', '50%'],
								data:[
									{value:sumis, name:'已出租'},
									{value:sumno, name:'未出租'}
								],
								label:{
									normal:{
										formatter:'{b}:\n{c}\n {d}%'
									}
								},
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					}

					piecharts.setOption(option2);

					option = {
						title:{
						},
						tooltip : {
							trigger: 'axis',
							axisPointer : {            // 坐标轴指示器，坐标轴触发有效
								type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						legend: {
							data: ['已出租','未出租']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						yAxis:  {
							type: 'value'
						},
						xAxis: {
							type: 'category',
							data: xdate,
							axisLabel:{interval:0}
						},
						dataZoom:{
						    startValue:0,
							endValue:5,
							show:true
						}
						,series: [
							{
								name: '已出租',
								type: 'bar',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideTop'
									}
								},
								data: isrent
							},
							{
								name: '未出租',
								type: 'bar',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideTop'
									}
								},
								data: norent
							}
						]
					};

					///柱状图
					charts.setOption(option);
					////////////////图标点击事件/////////////////////////////////
                    charts.on('click',function(params){
                        var i = params.dataIndex;
                        window.location.href="/phone/rentHouseCountDetail?cityid="+countryid[i] + "&cityName=" + params.name;
                    });
					//表格数据刷新
					var dataItem = new Array();
					for(var i = 0;i < xdate.length;i++){
						var oneitem = {
							"id":countryid[i],
							"area":xdate[i],
							"rent":isrent[i],
							"norent":norent[i],
							"count":isrent[i] + norent[i],
							"avg":avg[i]
						}
						dataItem.push(oneitem);
					}


				}
			,
				error:function(xhr,type,errorThrown){
					console.log(type);
				}
			});
		</script>
</body>

</html>